<template>
  <div>
    <div class="list wrap" v-infinite-scroll="load" infinite-scroll-disabled="disabled" infinite-scroll-distance="10">
      <ElHeader></ElHeader>
      <el-container>
        <el-main >
          <div class="main-head">
        <img width="100%" src="http://www.yhachina.com/images/exhibition/exhibition-banner.jpg" alt="" />
        <div class="text">
          <span>附近景点</span>
          <el-divider></el-divider>
          <template>
            <div class="jingdian">
              <template>
                <div class="jingdiann">
                  <spot v-for="(item, i) in spot.data" :key="i" :name="item.title" :location="item.detail"
                    :avatar="item.picture" @jump="jumpIn(item.qid, $event)">
                  </spot>
                  <p v-if="loading">加载中...</p>
                  <p v-if="noMore">没有更多了</p>
                </div>
              </template>
            </div>
          </template>

        </div>
      </div>
        </el-main>
      </el-container>
      <ElFooter></ElFooter>
    </div>
  </div>
</template>

<script>
import Spot from '@/components/Spot.vue'
import ElFooter from '@/components/ElFooter.vue'
import ElHeader from '@/components/ElHeader.vue'
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState(['user']),
  },
  data() {
    return {
      qid: 0,
      loginID: '',
      spot: {}, //保存景点res.data
      spott: {}, //保存景点res.data.data
      spots: {
        page: 1,
        pagesize: 6,
        total: 0,
      }, // 绑定当前页面中显示的景点列表数据(分页数据)
      loading: false,
    }
  },
  computed: {
    noMore() {
      console.log(
        'this.spot.length',
        this.spott.length,
        'this.spots.total',
        this.spots.total
      )
      return this.spot.length >= this.spots.total
    },
    disabled() {
      return this.loading || this.noMore
    },
  },
  methods: {
    load() {
      this.loading = true
      console.log('加载')
      setTimeout(() => {
        this.spots.page++
        console.log('page', this.spots.page)
        this.$http.jdApi
          .querySpot({ page: this.spots.page, pagesize: 6 })
          .then(res => {
            console.log('景点', res)
            this.spott.push(...res.data.data)
            console.log(this.spott)
          })
        this.loading = false
      }, 200)
    },

    // 跳转
    jumpIn(id) {
      console.log(id)
      this.$router.push(`/spot/spotdetails/${id}`)
    },
  },
  mounted() {
    // 加载当前城市的景点
    let params = { page: this.spots.page, pagesize: this.spots.pagesize }
    this.$http.jdApi.querySpot(params).then(res => {
      console.log(res)
      this.qid = res.data.data[0].qid
      this.spots.total = res.data.total

      this.spot = res.data
      this.spott = res.data.data
      console.log('res.data', res.data.data)
    })

    // 获取用户名
    let loginID = JSON.parse(sessionStorage.getItem('user'))
    console.log('user', loginID)
    if (loginID.uname == '') {
      loginID = '登录'
    }
    this.loginID = loginID.uname
  },
  components: { Spot, ElFooter, ElHeader },
}
</script>

<style lang="scss" scoped>
.wrap {
  height: 100vh;
  overflow-y: auto;
}

.el-main {
  padding: 0;
  margin-top: 15px;
}

.headerspan {
  position: relative;
  // margin-right: 10px;
  right: 0;
  width: 600px;

  div:nth-child(1) {
    position: absolute;
    top: 5px;
    height: 35px;
    right: 0;
    width: 250px;
    display: flex;
    justify-content: space-between;
    line-height: 35px;

    .little {
      font-weight: 300;
      font-size: 12px;
    }
  }

  div:nth-child(2) {
    position: absolute;
    width: 600px;
    right: 0;
    top: 35px;
    display: flex;
    justify-content: space-between;
    line-height: 35px;

    .bold {
      font-weight: bold;
      color: black;
    }
  }
}

.header {
  width: 1300px;
  margin: 0 auto;
}

.el-carousel img {
  width: 100%;
}

.trip {
  width: 900px;
  display: flex;
  margin: 20px auto;
  justify-content: space-between;
}
.main-head{
  padding: 0;
  margin: 30px 0 0 0;
  width: 100%;

  .img {
    width: 1021px;
  }

  .text {
    background-color: white;
    width: 1080px;
    margin: 0 auto;
    padding: 20px;
    position: relative;
    bottom: 60px;
    padding: 30px;
    color: #333;
    border-radius: 5px;
    box-shadow: 0 15px 35px -15px rgb(47 130 36 / 70%);
    span:nth-child(1) {
      display: block;
      font-size: 30px;
      font-weight: 1.5rem;
    }

    span:nth-child(2) {
      display: block;
      font-size: 15px;
      padding: 5px 0;
    }
  }
}
.jingdian {
  width: 1080pxpx;
  margin: 30px auto;

  .jingdiann {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}

.footer {
  background: #282a2b;

  height: 300px;

  .footerhead {
    width: 900px;
    margin: 0 auto;
    display: flex;
    justify-content: space-evenly;
    height: 50px;
    line-height: 50px;

    .bold {
      color: white;
    }
  }

  .footerbody {
    width: 900px;
    margin: 0 auto;
    position: relative;

    .yi {
      position: absolute;
      right: 0;
      color: #696a6b;
      font-size: 12px;
      display: flex;
      flex-direction: column;
      text-align: right;
      height: 40px;
    }

    .er {
      position: absolute;
      right: 0;
      top: 45px;
    }

    .san {
      position: absolute;
      right: 0;
      top: 90px;
      color: #696a6b;
      font-size: 12px;
      width: 250px;
      display: flex;
      justify-content: space-between;

      .wo {
        font-size: 12px;

        &:hover {
          color: #999999;
        }
      }
    }

    .si {
      position: absolute;
      right: 0;
      top: 130px;
      height: 20px;
      line-height: 20px;
      display: flex;
      width: 500px;
      justify-content: space-between;

      span {
        font-size: 12px;
        color: #696a6b;
      }

      .ni {
        font-size: 12px;

        &:hover {
          color: #999999;
        }
      }
    }
  }
}
</style>
